<template>
    <div class="container">
        <!-- <div class="box">
            <header class="header">头部</header>
            <div class="content">内容
                <van-button type="primary">主要按钮</van-button>
            </div>
        </div> -->
        <RouterView />

        <RouterView name="footer" />
        <!-- <footer class="footer">
            <ul>
                <RouterLink to="/">
                    <li>
                        <span><van-icon name="wap-home-o" /></span>
                        <p>首页</p>
                    </li>
                </RouterLink>
                <RouterLink to="/kind">
                    <li>
                        <span><van-icon name="apps-o" /></span>
                        <p>分类</p>
                    </li>
                </RouterLink>
                <RouterLink to="/cart">
                    <li>
                        <span><van-icon name="cart-o" /></span>
                        <p>购物车</p>
                    </li>
                </RouterLink>
                <RouterLink to="/user">
                    <li>
                        <span><van-icon name="user-circle-o" /></span>
                        <p>我的</p>
                    </li>
                </RouterLink>
            </ul>
        </footer> -->
    </div>
</template>
<script></script>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body,
#app,
.container {
    height: 100%;
    width: 100%;
}

.container {
    background: #efefef;
    display: flex;
    flex-direction: column;

    .box {
        flex: 1;

        display: flex;
        flex-direction: column;
        /*自适应*/
        overflow: auto;

        .header {
            height: 50px;
        }

        .content {
            flex: 1;
            overflow: auto;
        }
    }

    .footer {
        height: 50px;
        background: rgb(104, 103, 103);

        ul {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;

            a {
                flex: 1;
                color: black;

                &.router-link-active {
                    color: red
                }

                span {
                    font-size: 20px
                }
            }

        }
    }
}
</style>
